<template>
  <div class="title">
    楼栋管理
  </div>
  <el-button type="success" @click="Add()">添加</el-button>

  <div class="">
    <el-tree 
     style="max-width: 600px; width: 800px;" :data="buildingData" node-key="id" :props="defaultProps"
      :expand-on-click-node="false">
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span>
            <el-button type="primary" @click="handleAdd(node)">添加子节点</el-button>
            <el-button type="success" @click="handleChange(node)">修改</el-button>
            <el-button type="danger" @click="delNode(node)">删除</el-button>
          </span>
        </span>
      </template>
    </el-tree>
    <BuildingAdd v-if="dialogVisible" :buDate="buDate" @close="addClose" ></BuildingAdd>
  </div>
</template>

<script lang='ts' setup>
import { ref, watch, reactive, onMounted } from "vue"
import BuildingAdd from "../../components/BuildingAdd.vue";
import { buildingdata, buildingdel } from "../../service/building/building";
import { get } from "../../utils/request";
const buildingData = ref([]);
const buDate = ref({
  id: 0,
  name: "",
  parentName: "",
  pid: 0,
})


const dialogVisible = ref(false)
const addClose = () => {
  getbuildingdata();
  dialogVisible.value = false
}

const defaultProps = {
  children: 'children',
  label: 'name',
  id: "id"
}
const getbuildingdata = async () => {
  const res = await buildingdata();
  console.log(res);
  buildingData.value = res.data.list;
}


const Add = () => {
  buDate.value.pid = 0;
  buDate.value.parentName = "";
  buDate.value.name = "";
  dialogVisible.value = true
}
const handleAdd = (node: any) => {
  buDate.value.id = 0;
  buDate.value.pid = node.data.id;
  buDate.value.parentName = node.data.name;
  buDate.value.name = "";

  dialogVisible.value = true
}
const handleChange = (node: any) => {
  buDate.value.id = node.data.id
  buDate.value.pid=node.data.pid;
  buDate.value.name = node.data.name
  dialogVisible.value = true
}

const delNode = async (node: any) => {
  console.log(node.data.id, "node");
  let res = await buildingdel(node.data.id)
  console.log(res);
  getbuildingdata()
}
onMounted(() => {
  getbuildingdata();
})

</script>

<style scoped>
.title {
  color: skyblue;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.custom-tree-node {
  display: flex;
  width: 100%;
  justify-content: space-between;
  line-height: 50px;
}

/deep/ .el-tree-node__content {

  height: 40px;
}
</style>
